import { getAreaConfig, getIndustryConfig, getTagTypeConfig } from '@/utils/filterConfig';
import {
  getAppointment,
  getCurrencyCode,
  getEsgYear
} from './../apis';
import { ComponentType } from 'vc';
import { useRequest } from 'vue-request';
import { SubjectType } from '@/apis';
import { getIndexCode } from '@/views/modules/esg/apis';

export function useScreen() {
  const PAGE_SIZE = 15;

  const queryData = reactive<any>({
    pageNum: 1,
    pageSize: PAGE_SIZE,
    searchTxt: '',
    sortRule: '',
    provinceCode: '',
    cityCode: '',
    countryCode: '',
    industryCategoryCodeLv1: '',
    industryCategoryCodeLv2: '',
    industryCategoryCodeLv3: '',
    indicatorFiled: '',
    indicatorOrder: '',
    esgType: 'carbonAppointment',
    statisticalPeriod: ''
  });
  const tagTagYear: any = ref([]);
  const activeYear = ref();

  // 履约情况
  const { data: appointmentTypeData } = useRequest(getAppointment, {});

  // 年份
  const { data: yearData, run: runGetYear } = useRequest(getEsgYear, {
    manual: true,
    defaultParams: [{ dimensionCode: 1, esgType: 'environment' }],
    onSuccess(res) {
      if (res && res.length) {
        tagTagYear.value = res.map((item) => {
          if (item.active) {
            activeYear.value = item.year;
            Object.assign(queryData, {
              statisticalPeriod: item.year
            });
          }
          return { ...item, name: `${item.year}年`, code: item.year };
        });
      }
    }
  });

  const common = ref([
    {
      ...getAreaConfig().value,
      submitFn: (val) => {
        const { lv1, lv2, lv3 } = val;
        queryData.provinceCode = lv1.join();
        queryData.cityCode = lv2.join();
        queryData.countryCode = lv3.join();
      }
    },
    {
      ...getIndustryConfig().value,
      submitFn: (val) => {
        const { lv1, lv2, lv3 } = val;
        queryData.industryCategoryCodeLv1 = lv1?.join() || '';
        queryData.industryCategoryCodeLv2 = lv2?.join() || '';
        queryData.industryCategoryCodeLv3 = lv3?.join() || '';
      }
    }
  ]);

  const screen = computed(() => {
    return [
      ...common.value,
      {
        title: '年度',
        component: ComponentType.SINGLE,
        required: true,
        options: tagTagYear.value || [],
        value: activeYear.value,
        submitFn: (data) => {
          queryData.statisticalPeriod = data;
        }
      },
      {
        title: '履约情况',
        component: ComponentType.MULTIPLE,
        options: appointmentTypeData.value || [],
        submitFn: (data) => {
          queryData.appointmentType = data;
        }
      }
    ];
  });
  return {
    PAGE_SIZE,
    screen,
    queryData,
    runGetYear
  };
}
